<%-- 
    Document   : PlanDetail
    Created on : Mar 10, 2012, 7:56:29 PM
    Author     : Waseem
--%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
        <script type="text/javascript">
            function createevent(myForm) 
            {
                var EventName = $('input[name="EventName"]').val();
                var EventType = $('input[name="EventType"]:checked').val();
                var DaysOfWeek = new Array();
                var RepeatNumber =  $('option:selected').val();
                var queryString = "EventName=" + EventName
                + "&EventType=" + EventType;
                var numDays = $('input[name="DaysOfWeek"]:checked').length;
                for (var i=0; i<numDays; i++)
                    {
                        DaysOfWeek[i] = $('input[name="DaysOfWeek"]:checked').eq(i).val();
                        queryString = queryString + "&DaysOfWeek=" + DaysOfWeek[i];
                    }
                queryString = queryString + "&RepeatNumber=" + RepeatNumber;
                $.ajax({
                url: "Plans?action=event&" + queryString,
                success: function()
                {
                    myForm.reset();
                    var color = get_random_color();
                    $("div.addevent_form").after("<div style=\"background-color:"+color+";color:white;margin:10px;text-align:center;\">"+EventName+"</div>");
                    var repeat = parseInt(RepeatNumber);
                    var weekCounter = 0;
                    while (weekCounter<7)
                        {
                            for (var i=0; i<DaysOfWeek.length; i++)
                                {
                                    var day = 0;
                                    day = DaysOfWeek[i];
                                    day++;
                                    $(".plandetail_container tr").eq(weekCounter).find("td:nth-child("+day+")").append("<div style=\"color:white;background-color:"+color+";\">"+EventName+"</div>");
                                }
                                weekCounter = weekCounter+repeat;
                        }
                }
                });
            }
            function get_random_color() 
            {
                var letters = '0123456789ABCDEF'.split('');
                var color = '#';
                for (var i = 0; i < 6; i++ ) {
                    color += letters[Math.round(Math.random() * 15)];
                }
                return color;
            }
        </script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Plan Detail</title>
        <link rel="stylesheet" href="./css/main.css" type="text/css"/>
    </head>
    <body>
        <div class="filler">
            <div class="bg">
                <div class="main">
                    <c:choose>
                    <c:when test="${user.isDoctor}">
                    <div class="hdr">
                        <div class="logo">
                            <img src="./imgs/logo.png"/>
                        </div>
                        <div class="hdr_content_container">
                            <div class="acct_btns" style="margin-top : 10px;">
                                <div class="acct_btn">
                                    <a href="accountSettings.jsp">Account Settings</a>
                                </div>
                                <div class="acct_btn">
                                    <a href="LoginServlet?action=logout">Log Out</a>
                                </div>
                            </div>

                            <div class="acct_btns" style="margin-top: 75px;">
                                <div class="acct_btn">
                                    <a href="doctorDashboard.jsp">Home</a>
                                </div>
                                <div class="acct_btn">
                                    <a href="plans.jsp">Plans</a>
                                </div>
                                <div class="acct_btn">
                                    <a href="patients.jsp">Patients</a>
                                </div>

                            </div>
                        </div>
                    </div>
                    </c:when>
                    <c:otherwise>
                    <div class="hdr">
                        <div class="logo">
                            <img src="./imgs/logo.png"/>
                        </div>

                        
                        <div class="hdr_content_container">
                            <div class="acct_btns" style="margin-top : 10px;">
                                <div class="acct_btn">
                                    <a href="accountSettings.jsp">Account Settings</a>
                                </div>
                                <div class="acct_btn">
                                    <a href="LoginServlet?action=logout">Log Out</a>
                                </div>
                            </div>

                            <div class="acct_btns" style="margin-top: 75px;">
                                <div class="acct_btn">
                                    <a href="dashboard.jsp">Home</a>
                                </div>
                                <div class="acct_btn">
                                    <a href="calendar.jsp">Calendar</a>
                                </div>
                                <div class="acct_btn">
                                    <a href="plans.jsp">Plans</a>
                                </div>
                                <div class="acct_btn">
                                    <a href="data.jsp">Data</a>
                                </div>
                                <div class="acct_btn">
                                    <a href="friends.jsp">Friends</a>
                                </div>

                            </div>
                        </div>
                    </div>
                    </c:otherwise>
                    </c:choose>
                    <!-- hdr -->

                    <div class="container">
                        <div class="left_nav">
                            <div class="addevent_button">
                                Add Event
                            </div>
                            <div class="addevent_form">
                                <form id="event-form">
                                    <table>
                                        <tr>
                                            <td>Event Name: </td>
                                            <td colspan="3"><input type="text" name="EventName"/></td>
                                        </tr>
                                        <tr><td colspan="4"><hr/></td></tr>
                                        <tr>
                                            <td></td>
                                            <th>Metric</th>
                                            <th>Static</th>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>Event Type: </td>
                                            <td><input type="radio" name="EventType" value="metric"/></td>
                                            <td><input type="radio" name="EventType" value="static"/></td>
                                            <td></td>
                                        </tr>
                                        <tr><td colspan="4"><hr/></td></tr>
                                        <tr>
                                            <td colspan="4">Days of Week:</td>
                                        </tr>
                                        <tr>
                                            <td colspan="4">
                                                <input type="checkbox" name="DaysOfWeek" value="0"/>Mon 
                                                <input type="checkbox" name="DaysOfWeek" value="1"/>Tue 
                                                <input type="checkbox" name="DaysOfWeek" value="2"/>Wed 
                                                <input type="checkbox" name="DaysOfWeek" value="3"/>Thu 
                                                <input type="checkbox" name="DaysOfWeek" value="4"/>Fri 
                                                <input type="checkbox" name="DaysOfWeek" value="5"/>Sat 
                                                <input type="checkbox" name="DaysOfWeek" value="6"/>Sun 
                                            </td>
                                        </tr>
                                        <tr><td colspan="4"><hr/></td></tr>
                                        <tr>
                                            <td colspan="4">
                                                Repeat Every 
                                                <select name="RepeatNumber">
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <option value="4">4</option>
                                                </select>
                                                 Weeks
                                            </td>
                                        </tr>
                                        <c:if test="${user.isDoctor}">
                                        <tr><td colspan="4"><hr/></td></tr>
                                        <tr>
                                            <td>Alert: </td>
                                            <td>Over<input type="radio" name="AlertType" value="over"/></td>
                                            <td>Under<input type="radio" name="AlertType" value="under"/></td>
                                        </tr>
                                        <tr>
                                            <td colspan="3">
                                                <input width=15 type="text" name="AlertValue"/>
                                            </td>
                                        </tr>
                                        </c:if>
                                        <tr><td colspan="4"><hr/></td></tr>
                                        <tr><td colspan="4"><button type="button" onclick="createevent(this.form)">Add</button></td></tr>
                                    </table>
                                </form>
                            </div>
                        </div>
                        <div class="page_body">
                            <div class="plandetail_hdr">
                                <span>${NewPlan.planName}</span>
                            </div>
                            <div class="plandetail_container">
                                <form action="Plans?action=finish" method="post">           
                                    <input type="submit" value="Finish!"/>
                                </form>
                                <table>
                                    <tr>
                                        <th>Mon</th>
                                        <th>Tue</th>
                                        <th>Wed</th>
                                        <th>Thu</th>
                                        <th>Fri</th>
                                        <th>Sat</th>
                                        <th>Sun</th>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- dashboard container -->
                </div>
                <!-- main -->
            </div>
            <!-- bg -->
        </div>
    </body>
</html>
